<template>
    <div class="resgister-box">
        <van-nav-bar
            left-arrow
            @click-left="onClickLeft"
        />
        <div class="content">
            <van-form ref="node">
                <van-cell-group inset style="background-color: transparent;">
                    <van-field
                    v-model="user.name"
                    name="用户名"
                    label="用户名"
                    placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                    />
                    <van-field
                    v-model="user.password"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                    />
                    <van-field name="uploader" label="上传头像" class="file">
                        <template #input>
                            <van-uploader v-model="photos" :max-count="1" :after-read="afterRead"/>
                        </template>
                    </van-field>
                    <van-field name="radio" label="性别">
                        <template #input>
                            <van-radio-group v-model="user.sex" direction="horizontal">
                            <van-radio name="男" checked-color="#178c00">男</van-radio>
                            <van-radio name="女" checked-color="#178c00">女</van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>
                    <van-field
                        v-model="user.email"
                        name="pattern"
                        placeholder="请输入邮箱"
                        :rules="[{ required:true, pattern:/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/, message: '请输入正确内容' }]"
                        />
                    <van-field
                        v-model="user.phone"
                        name="pattern"
                        placeholder="请输入电话号码"
                        :rules="[{ required:true, pattern:/^1[3-9]{1}[0-9]{9}$/, message: '请输入正确内容' }]"
                        />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit"
                    color="linear-gradient(to right, #bcff00, #33d900)"
                    @click="submitEvt"
                    :loading="loading">
                    注册
                    </van-button>
                </div>
            </van-form>
        </div>
        
    </div>
</template>
<script lang="ts" setup>
import { showToast } from "vant";
import { ref, Ref } from "vue";
import { useRouter } from "vue-router";
import { base64UploadApi, userRegiseterApi } from "../../apis/userApis";
import { scaleImage } from '../../utils/index'
const loading:Ref<boolean> = ref(false)
const router = useRouter()
const photos: Ref<Array<any>> = ref([])
const user:Ref<UserInfo> = ref({
    id: '',
    name: '',
    photo:'',
    password: '',
    sex: '女',
    address: '',
    birthday: '',
    phone: '',
    email: '',
    remark: ''
})

/** 注册点击事件 */
const node :Ref = ref()
function submitEvt(){
    if(loading.value) return
    node.value.validate().then(async ()=>{
        loading.value = true
        let _res = await userRegiseterApi({
            ...user.value,
            id:user.value.phone
        })
        loading.value = false
        if(_res.code === 200){
            showToast({
                message:'用户注册成功',
                position:'top'
            })
        }else{
            showToast({
                message:'注册失败:' + _res.message,
                position:'top'
            })
        }
    }).catch(()=>{})
} 
/** 返回上一页事件 */
function onClickLeft(){
    router.push('/login')
} 

/** 头像上传 */
async function afterRead(_arg:any) {
    let _file:File = _arg.file;
    let _str:string = await scaleImage(_file)
    let _res:any = await base64UploadApi(_str,_file.name)
    if (_res.code === 200) user.value.photo = _res.data
} 
</script>
<style lang="less" scoped>
@import url('../../style/comon.less');
    .resgister-box{
        .rel();
        background-color: #c8ef6a !important;
        background: url('../../../public/img/register.png') top center / 100%  no-repeat;
       .van-nav-bar{
            position: absolute;
            background-color: transparent  !important ;
            z-index: 10;
            &::v-deep .van-icon:before{
                font-size: 1.4rem;
                color: rgb(202, 201, 201);
            }
        }
        .content{
            display: block;
            position: absolute;
            width: 96vw;
            min-height: 50vh;
            left: calc(50% - 48vw);
            bottom: .5rem;
            border-radius: .6rem;
            background-color: whitesmoke;
            box-shadow: 0 0 10px #aeabab;
            overflow-x: hidden;
            .van-form{
                display: block;
                padding: 10px 0 4px;
                &::v-deep .van-field{
                    background-color: transparent;
                    padding-top: .8rem;
                    padding-bottom: .8rem;
                    border-bottom: 1px solid @g6;
                    font-size: .8rem;
                }
                &::v-deep .file{
                    line-height: 88px;
                }
            
            }
        }
    }
    .content::-webkit-scrollbar {
    display: none;
  }
</style>